<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Bootstrap-ecommerce by Vosidiy">

<title>Team3电子商务网站</title>

<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">

<!-- jQuery -->
<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>

<!-- Bootstrap4 files-->
<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

<!-- Font awesome 5 -->
<link href="fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

<!-- plugin: owl carousel  -->
<link href="plugins/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="plugins/owlcarousel/assets/owl.theme.default.css" rel="stylesheet">
<script src="plugins/owlcarousel/owl.carousel.min.js"></script>

<!-- custom style -->
<link href="css/ui.css" rel="stylesheet" type="text/css"/>
<link href="css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)" />

<!-- custom javascript -->
<script src="js/script.js" type="text/javascript"></script>

<script type="text/javascript">
/// some script

// jquery ready start
$(document).ready(function() {
	// jQuery code

}); 
// jquery end
</script>

</head>
<body>


<div th:replace="fragment::header"></div>

<!-- ========================= SECTION MAIN ========================= -->
<section class="section-main bg padding-y-sm">
<div class="container">
<div class="card">
	<div class="card-body">
<div class="row row-sm">
	<aside class="col-md-3">
<h5 class="text-uppercase">商品分类</h5>
	<ul class="menu-category">
		<li> <a href="/commodity/Search?commType=食品生鲜&searchString=">食品生鲜  </a></li>
		<li> <a href="/commodity/Search?commType=智能数码&searchString=">智能数码 </a></li>
		<li> <a href="/commodity/Search?commType=美妆个护&searchString=">美妆个护  </a></li>
		<li> <a href="/commodity/Search?commType=母婴玩具&searchString=">母婴玩具 </a></li>
		<li> <a href="/commodity/Search?commType=运动户外&searchString=">运动户外 </a></li>
		<li> <a href="/commodity/Search?commType=生活家电&searchString=">生活家电 </a></li>
		<li class="has-submenu"> <a href="#">更多分类  <i class="icon-arrow-right pull-right"></i></a>
			<ul class="submenu">
				<li> <a href="/commodity/Search?commType=医药健康&searchString=">医药健康 </a></li>
				<li> <a href="/commodity/Search?commType=珠宝艺术&searchString=">珠宝艺术 </a></li>
				<li> <a href="/commodity/Search?commType=图书杂志&searchString=">图书杂志</a></li>
			</ul>
		</li>
	</ul>

	</aside> <!-- col.// -->
	<div class="col-md-6">

<!-- ================= main slide ================= -->
<div class="owl-init slider-main owl-carousel" data-items="1" data-nav="true" data-dots="false">
	<div class="item-slide">
		<img src="images/banners/29.jpg">
	</div>
	<div class="item-slide">
		<img src="images/banners/28.jpg">
	</div>
	<div class="item-slide">
		<img src="images/banners/29.png">
	</div>
</div>
<!-- ============== main slidesow .end // ============= -->

	</div> <!-- col.// -->
	<aside class="col-md-3">

<h6 class="title-bg bg-secondary"> 优惠活动</h6>
<div style="height:280px;">
	<figure class="itemside has-bg border-bottom" style="height: 33%;">
		<img class="img-bg" src="images/items/a.png">
		<figcaption class="p-2">
			<h6 class="title">万人抢冰洗，每1000减100 </h6>
			<a href="#">点击进入...</a>
		</figcaption>
	</figure>

	<figure class="itemside has-bg border-bottom" style="height: 33%;">
		<img class="img-bg" src="images/items/1.jpg" height="80">
		<figcaption class="p-2">
			<h6 class="title">生活家电，领劵满300减40 </h6>
			<a href="#">点击进入...</a>
		</figcaption>
	</figure>
	<figure class="itemside has-bg border-bottom" style="height: 33%;">
		<img class="img-bg" src="images/items/c.png" height="80">
		<figcaption class="p-2">
			<h6 class="title">厨卫电器，爆款低至499元</h6>
			<a href="#">点击进入...</a>
		</figcaption>
	</figure>
</div>

	</aside>
</div> <!-- row.// -->
	</div> <!-- card-body .// -->
</div> <!-- card.// -->

	<div class="" style="
    color: #ffc107;
    background-color: #ffc107;
    border-color: yellow;
    border-width: 1px;
    height: 20px;
    margin: 10px;
    border-style: solid;
">

	</div>

</div> <!-- container .//  -->
</section>
<!-- ========================= SECTION MAIN END// ========================= -->


<!-- ========================= SECTION CONTENT ========================= -->
<section class="section-content padding-y-sm bg">
<div class="container">

<header class="section-heading heading-line">
	<h4 class="title-section bg">好货推荐</h4>
</header>

<div class="card">
<div class="row no-gutters">
	<div class="col-md-3">

<article href="#" class="card-banner h-100 bg2">
	<div class="card-body zoom-wrap">
		<h5 class="title">MAC/魅可全色号子弹头唇膏 哑光口红 chili小辣椒</h5>
		<p>经典子弹头唇膏，魅可的“当家花旦”，深受各路明星、超模的喜爱，彩妆界的潮流弄潮儿。从饱满到薄透，从炫亮到哑光，你想要的妆效，它都能实现。</p>
		<a href="/commodity/Details/13" class="btn btn-warning">查看</a>
		<img src="images/items/30.png" height="200" class="img-bg zoom-in">
	</div>
</article>

	</div> <!-- col.// -->
	<div class="col-md-9">
<ul class="row no-gutters border-cols">
	<li class="col-6 col-md-3">
<a href="/commodity/Details/4" class="itembox">
	<div class="card-body">
		<p class="word-limit">Apple iPhone XS Max 256G </p>
		<img class="img-sm" src="images/items/1.jpg">
	</div>
</a>
	</li>
	<li class="col-6 col-md-3">
<a href="/commodity/Details/5" class="itembox">
	<div class="card-body">
		<p class="word-limit">小米（MI）Redmi AirDots</p>
		<img class="img-sm" src="images/items/4.jpg">
	</div>
</a>
	</li>
	<li class="col-6 col-md-3">
<a href="/commodity/Details/6" class="itembox">
	<div class="card-body">
		<p class="word-limit">索尼（SONY）ILCE-7M2K/B微单</p>
		<img class="img-sm" src="images/items/7.jpg">
	</div>
</a>
	</li>
	<li class="col-6 col-md-3">
<a href="/commodity/Details/7" class="itembox">
	<div class="card-body">
		<p class="word-limit">迪奥 （Dior） 全新烈焰蓝金唇膏999# </p>
		<img class="img-sm" src="images/items/10.jpg">
	</div>
</a>	
	</li>
</ul>
<ul class="row no-gutters border-cols">
	<li class="col-6 col-md-3">
<a href="/commodity/Details/8" class="itembox">
	<div class="card-body">
		<p class="word-limit">当季新鲜水果国产车厘子</p>
		<img class="img-sm" src="images/items/13.png">
	</div>
</a>
	</li>
	<li class="col-6 col-md-3">
<a href="/commodity/Details/12" class="itembox">
	<div class="card-body">
		<p class="word-limit">费列罗(Ferrero Rocher) 巧克力 </p>
		<img class="img-sm" src="images/items/25.jpg">
	</div>
</a>
	</li>
	<li class="col-6 col-md-3">
<a href="/commodity/Details/9" class="itembox">
	<div class="card-body">
		<p class="word-limit">Star世达 足球SB405 </p>
		<img class="img-sm" src="images/items/16.jpg">
	</div>
</a>
	</li>
	<li class="col-6 col-md-3">
<a href="/commodity/Details/11" class="itembox">
	<div class="card-body">
		<p class="word-limit">单缸桶半全自动小型迷你洗衣机</p>
		<img class="img-sm" src="images/items/22.jpg">
	</div>
</a>	
	</li>
</ul>
	</div> <!-- col.// -->
</div> <!-- row.// -->
	
</div> <!-- card.// -->

</div> <!-- container .//  -->
</section>
<!-- ========================= SECTION CONTENT END// ========================= -->


<div th:replace="fragment::footer"></div>


</body>
</html>